<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue.js"></script>


</head>
<body>

    <div id="app">
        <h2>  {{msg1}}</h2>
        <!-- <div v-text=" 写vue的data里面的变量  "></div> -->
        <div v-text='msg1'  a='111'></div>
        <!-- v-html -->
        <div v-html="msg1"></div>

  <hr>

      <div v-text='msg2'></div>

      <div v-html='msg2'></div>

      <!-- v-pre    预设   不再解析文本 富文本编辑 的时候使用 -->

      <div v-pre > xxxx {{msg1}}</div>



      <!-- v-once 只编译一次 提高性能 -->

      <div  v-once>  {{msg4}}</div>

    </div>
      <script>
        new Vue({
            el:"#app",
            data:{
                msg1:'hello vue  学习vue心态要好',
                msg2:'<h3> 学习vue 就不能去洗脚了 学好了再去</h3>',
                msg3:'<h3> 我就是这样展示 你不要动我   xxx   xxx</h3>',
                msg4:'我只有第一次绑定生效'
            },
            mounted() {
                setTimeout(() => {
                    this.msg4='xxxxx'
                }, 2000);
            }
        })

      </script>
</body>
</html>